<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="content-topitem">
			<view class="content-topitem-left">推荐歌单</view>
			<view class="content-topitem-right" @tap="gotocommend()">更多></view>
		</view>
		<!-- 图片等循环 -->
		<view class="playlist">
			<view class="playlist-item" v-for="(item, index) in recommendlist" :key="index" @tap="send(item.id)">
				<image :src="item.picUrl" alt=""></image>
				<u--text :text="item.name" lines="2" size="16rpx" align="center"></u--text>
			</view>
		</view>
	</view>
</template>

<script>
import { getRecSongsSheet } from '@/http/home.js';
export default {
	data() {
		return {
			recommendlist: [] //推荐歌单
		};
	},
	created() {
		this._getRecSongsSheet();
	},
	methods: {
		//获取推荐歌单
		async _getRecSongsSheet() {
			const { result: res } = await getRecSongsSheet(6);
			this.recommendlist = res;
		},

		//歌单详情
		send(id) {
			uni.navigateTo({
				url: '/view/SongSheet/SongSheet?id=' + id
			});
		},
		// 歌单广场
		gotocommend() {
			uni.navigateTo({
				url: '/view/RecommendedSongList/RecommendedSongList'
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	background-color: #fff;
	margin: 15rpx 0;
	border-bottom: 1px solid #e5e5e5;
	border-radius: 12px;
	// padding: 12px 0;

	&-topitem {
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left {
			display: flex;
			align-items: center;
			padding-left: 15px;
			font-size: 18px;
			font-weight: bold;
			padding: 15rpx 30rpx;
		}

		&-right {
			width: 65px;
			height: 20px;
			margin-right: 12rpx;
			border: 1rpx solid #e5e5e5;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
		}
	}
}

.playlist {
	margin: 0rpx 40rpx;
	// margin: 13rpx;
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
	justify-content: space-between;

	&-item {
		width: 32%;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;
		margin: 15rpx 3rpx;
		// border: 1px solid red;

		image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 20rpx;
			display: flex;
			// justify-content: space-between;
			box-shadow: 0px -5px 0px 0px rgba(216, 228, 241, 0.1);
		}
	}
}
</style>
